<template>
  <div class="index">
    <div class="flex" style="font-size: 12px; padding: 0.2rem 0 0;">
      <div style="flex: 1;" class="flexcc">
        <span :class="all.settlement_status == 0 ?'li act':'li' " @click="search(0)">全部</span>
      </div>
      <div style="flex: 1;" class="flexcc">
        <span :class="all.settlement_status == 1 ?'li act':'li' " @click="search(1)">待结算</span>
      </div>
      <div style="flex: 1;" class="flexcc">
        <span :class="all.settlement_status == 2 ?'li act':'li' " @click="search(2)">已结算</span>
      </div>
      <div style="flex: 1;" class="flexcc">
        <span :class="all.settlement_status == 3 ?'li act':'li' " @click="search(3)">终止结算</span>
      </div>
    </div>
    <div style="padding: 0.3rem;">
      <div class="revenue_container" v-if="all.settlement_status == 2">
        <div class="revenue_son_one">
          <div style="display:flex;">
            <div style="font-size:0.3rem">{{this.year}}年{{this.month}}月合计收益(元)</div>
            <img src="../../../static/img/bottom_img.png" alt @click="dateClick" />
          </div>
          <div style="color:#005AFF;font-size:0.6rem;font-weight:bold;margin-top:0.2rem">{{this.shouyi}}</div>
        </div>
        <div class="revenue_son_two">
          <div class="revenue_son_two_style">
            <div>今年收益</div>
            <div>{{$route.query.year_sum_commission}}</div>
          </div>
          <div class="revenue_son_two_style">
            <div>累计总收益</div>
            <div>{{$route.query.sum_commission}}</div>
          </div>
        </div>
        <van-popup v-model="show" position="bottom" round>
          <van-datetime-picker
            v-model="currentDate"
            type="year-month"
            title="选择年月"
            @cancel="show=false"
            :max-date="maxData"
            :formatter="formatter"
            @confirm="show=false"
          />
        </van-popup>
      </div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getinfo2"
        style="min-height: 3rem;"
      >
        <div class="listli" v-for="item in list" :key="item">
          <div
            class="flexbc"
            style=" padding: 0.25rem 0.3rem; "
            :class="item.color=='red'?'red':'blue'"
          >
            <div class="flexc">
              <div>订单号：{{item.order_no}}</div>
              <div>
                <img
                  src="../../../static/mimg/fuzhi.png"
                  style="width: 0.26rem; margin-left: 0.2rem;"
                  @click="copy(item.order_no)"
                />
              </div>
            </div>
            <div v-if="item.settlement_status == 1">待结算</div>
            <div v-if="item.settlement_status == 2">已结算</div>
            <div v-if="item.settlement_status == 3">终止结算</div>
          </div>
          <div style="padding: 0.25rem 0.3rem; background: #fff;">
            <div
              class="flexbc"
              style="font-size: 0.28rem; margin-bottom: 0.1rem;justify-content: space-between;"
            >
              <div>{{item.goods_name}}</div>
              <div style="color: red;" v-if="item.settlement_type==0">全量</div>
              <div style="color: red;" v-if="item.settlement_type==31">一阶段</div>
              <div style="color: red;" v-if="item.settlement_type==32">二阶段</div>
            </div>
            <div class="flexbc" style="margin-bottom: 0.1rem;">
              <div style="font-size: 0.24rem; color: #666;">结算金额</div>
              <div style="font-size: 0.3rem; color: rgb(245, 121, 33);">￥{{item.wq_commission}}</div>
              <!--  -->
              <!-- <div>{{ shop_id  }},{{ item.share_id }}</div> -->
              <!--  -->

              <!-- <div v-if="item.settlement_status == 1&&item.settlement_type!=31&&item.settlement_type!=32" style="font-size: 0.3rem; color: rgb(245, 121, 33);">
                ￥{{item.pre-commission}}
              </div>
              <div v-if="(item.settlement_status == 1||item.settlement_status == 0||item.settlement_status == 3)&&item.settlement_type==31&&shop_id==item.share_id" style="font-size: 0.3rem; color: rgb(245, 121, 33);">
                ￥{{item.active_commission}}
              </div>
              <div v-if="(item.settlement_status == 1||item.settlement_status == 0||item.settlement_status == 3)&&item.settlement_type==32&&shop_id==item.share_id" style="font-size: 0.3rem; color: rgb(245, 121, 33);">
                ￥{{item.first_recharge_one_commission}}-￥{{item.first_recharge_two_commission}}
              </div>
              <div v-if="item.settlement_status == 2" style="font-size: 0.3rem; color: rgb(245, 121, 33);">￥{{item.user_commission }}</div>
              <div v-if="item.settlement_type==null&&item.settlement_conditions==3&&shop_id==item.share_id" style="font-size: 0.3rem; color: rgb(245, 121, 33);">
                ￥{{item.active_commission}}-￥
                <span v-if="item.first_recharge_two_commission>item.first_recharge_one_commission">{{ addNum(item.active_commission,item.first_recharge_two_commission) }} </span>
                <span v-if="item.first_recharge_two_commission<item.first_recharge_one_commission">{{ addNum(item.active_commission,item.first_recharge_one_commission) }} </span>
              </div>
              <div v-if="item.settlement_type==null&&item.settlement_conditions==3&&shop_id!=item.share_id" style="font-size: 0.3rem; color: rgb(245, 121, 33);">
                ￥{{item.pre-commission}}
              </div>
              <div v-if="item.settlement_type==null&&item.settlement_conditions!=3" style="font-size: 0.3rem; color: rgb(245, 121, 33);">
                ￥{{item.pre-commission}}
              </div>-->

              <!-- <div v-if="item.settlement_status == 3" style="font-size: 0.3rem; color: rgb(245, 121, 33);">
                ￥{{item.first_recharge_one_commission}}-￥{{item.first_recharge_two_commission}}
              </div>-->
            </div>
            <div class="flexbc" style="margin-bottom: 0.1rem;">
              <div style="font-size: 0.24rem; color: #666;">生产号码</div>
              <div
                style="font-size: 0.24rem; color: rgb(120, 125, 133);"
              >{{item.plan_mobile_produce}}</div>
            </div>
            <div class="flexbc" style="margin-bottom: 0.1rem;">
              <div style="font-size: 0.24rem; color: #666;">订单状态</div>
              <div style="font-size: 0.24rem; color: rgb(120, 125, 133);">{{item.status_name}}</div>
            </div>
            <div class="flexbc" style="margin-bottom: 0.1rem;" v-if="item.status_name == '生产失败'">
              <div style="font-size: 0.24rem; color: #666;">订单失原因</div>
              <div style="font-size: 0.24rem; color: rgb(120, 125, 133);">{{item.reason}}</div>
            </div>
            <div class="flexbc" style="margin-bottom: 0.1rem;">
              <div style="font-size: 0.24rem; color: #666;">激活状态</div>
              <div
                style="font-size: 0.24rem; color: rgb(120, 125, 133);"
              >{{item.active_status_name}}</div>
            </div>
            <div class="flexbc" style="margin-bottom: 0.1rem;">
              <div style="font-size: 0.24rem; color: #666;">发展人</div>
              <div style="font-size: 0.24rem; color: rgb(120, 125, 133);">{{item.share_name}}</div>
            </div>
            <div class="flexbc" style="margin-bottom: 0.1rem;">
              <div style="font-size: 0.24rem; color: #666;">不结算原因</div>
              <div style="font-size: 0.24rem; color: rgb(120, 125, 133);">{{item.remark}}</div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
var h = document.documentElement.clientWidth / 7.5 + "px";
document.documentElement.style.fontSize = h;
export default {
  name: "query",
  data() {
    return {
      show: false,
      all: {
        //2024/9/9 改为默认跳转已结算tabs
        settlement_status: 2, //0:全部 1:待结算 2:已结算 3:未结算 默认为全部
        page: 1,
        pageSize: 20
      },
      list: [],
      loading: false,
      finished: false,
      shop_id: "",
      currentDate: new Date(),
      shouyi:0,
      maxData:new Date(),
      year:'',
      month:''
    };
  },
  created() {},
  mounted() {
    this.shop_id = JSON.parse(localStorage.getItem("user")).id;
  },
  watch: {
    currentDate: {
      handler(newName, oldName) {
        this.dateConfirm(newName)
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    dateConfirm(val) {
      let date = new Date(val); // 或者任何有效的Date字符串
      let year = date.getFullYear(); // 获取年份
      let month = (date.getMonth() + 1).toString().padStart(2, "0");
      this.year=year
      this.month=month
      axios
        .get("/agent/commission/month/find", {
          params: { year, month }
        })
        .then(response => {
          if (response.data.msg.code == 0) {
            this.shouyi=response.data.data.sum_commission
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    formatter(type, val) {
      if (type === "year") {
        return val + "年";
      }
      if (type === "month") {
        return val + "月";
      }
      if (type === "day") {
        return val + "日";
      }
      return val;
    },
    dateClick: function() {
      this.show = true;
    },
    onClickLeft: function() {
      this.$router.back(-2);
    },
    search: function(val) {
      this.all.settlement_status = val;
      this.list = [];
      this.all.page = 1;
      this.getinfo2();
    },

    getinfo2: function() {
      axios
        .get("/agent/settlement/orders", { params: this.all })
        .then(response => {
          if (response.data.msg.code == 0) {
            if (response.data.data.data.length > 0) {
              response.data.data.data.forEach(item => {
                this.list.push(item);
              });

              if (this.list.length >= response.data.data.total) {
                this.finished = true;
              } else {
                this.all.page++;
                this.loading = false;
              }
            } else {
              this.finished = true;
            }
          } else {
            vant.Toast(response.data.msg.info);
          }
        });
    },
    //自定义加法运算
    addNum(arg1, arg2) {
      var r1, r2, m, c;
      try {
        r1 = arg1.toString().split(".")[1].length;
      } catch (e) {
        r1 = 0;
      }
      try {
        r2 = arg2.toString().split(".")[1].length;
      } catch (e) {
        r2 = 0;
      }
      c = Math.abs(r1 - r2);
      m = Math.pow(10, Math.max(r1, r2));
      if (c > 0) {
        var cm = Math.pow(10, c);
        if (r1 > r2) {
          arg1 = Number(arg1.toString().replace(".", ""));
          arg2 = Number(arg2.toString().replace(".", "")) * cm;
        } else {
          arg1 = Number(arg1.toString().replace(".", "")) * cm;
          arg2 = Number(arg2.toString().replace(".", ""));
        }
      } else {
        arg1 = Number(arg1.toString().replace(".", ""));
        arg2 = Number(arg2.toString().replace(".", ""));
      }
      return (arg1 + arg2) / m;
    }
  }
};
</script>


<style scoped lang="less">
.index {
  height: 100vh;
  overflow: auto;
  .act {
    border-bottom: 3px rgb(85, 85, 85) solid !important;
    color: rgb(85, 85, 85) !important;
  }
  .li {
    border-bottom: 3px #f6f8fb solid;
    padding-bottom: 0.1rem;
    font-size: 0.28rem;
    color: rgb(146, 146, 146);
  }
  .listli {
    border-radius: 0.1rem;
    font-size: 0.24rem;
    overflow: hidden;
    margin-bottom: 0.2rem;
  }
  .blue {
    background: rgb(228, 237, 255);
    color: rgb(0, 90, 255);
  }
  .red {
    background: #ffe4e4;
    color: #c51b21;
  }
}
.revenue_container {
  width: 100%;
  height: 4rem;
  background: #e4edff;
  border-radius: 0.2rem;
  margin-bottom: 0.2rem;
  padding: 0.3rem;
  .revenue_son_one {
    width: 100%;
    height: 50%;
    border-bottom: 0.02rem solid #dfdfdf;
    img {
      width: 0.3rem;
      height: 0.15rem;
      margin: 0.15rem 0 0 0.1rem;
    }
  }
  .revenue_son_two {
    width: 100%;
    height: 50%;
    .revenue_son_two_style {
      display: flex;
      justify-content: space-between;
      font-size: 0.28rem;
      color: #666666;
      margin-top: 0.35rem;
    }
  }
}
</style>
